<template>
  <div class="kjk">
    <a-typography-title :level="4" class="header">
      <img
        src="@/assets/left-s-line.png"
        class="left-s-line"
        @click="handleAvatarClick"
      />
      选择权益
    </a-typography-title>
    <div class="qyl">
      <van-radio-group v-model="checked">
        <van-cell-group inset>
          <div
            v-for="(item, index) in dataList"
            :key="index"
            class="item-container"
          >
            <van-cell clickable class="clickableCell">
              <van-card
                :desc="item.goodsSubtitle"
                :title="item.goodsName"
                :thumb="item.goodsPhoto"
              >
                <!-- <template #footer>
                  <div class="asd">
                    <img src="@/assets/20.png" class="img16" />
                    <span class="goodsDeibe" v-html="item.goodsDescribe"></span>
                  </div>
                </template> -->
              </van-card>
              <template #right-icon>
                <van-radio :name="item.id" checked-color="#3C7058" />
              </template>
            </van-cell>
            <div class="jx"></div>
          </div>
        </van-cell-group>
      </van-radio-group>
    </div>

    <van-button type="default" block class="add" @click="submit"
      >确认选择</van-button
    >
  </div>
  <Receive :show="showReceive" :goodsDetail="goodsDetail" @closeShow="closeShow" />
</template>

<script setup >
import { useRouter, useRoute } from 'vue-router'
import { Toast } from 'vant'
import Receive from './receive.vue'
import { goodsRaiList } from '@/api/api'

const route = useRoute()
const router = useRouter()
const dataList = ref([])
const goodsDetail = ref({})
onBeforeMount(async () => {
  const res = await goodsRaiList({
    raiGoods: route.query.raiGoodsParam.slice(1, -1),
  })
  if (res.code == 200) {
    dataList.value = res.data
  }
})
const checked = ref('')
const showReceive = ref(false)
const handleAvatarClick = () => {
  router.push({ path: '/vip' })
}
const submit = () => {
  if (checked.value) {
    showReceive.value = true
    goodsDetail.value = dataList.value.filter(i => i.id == checked.value)[0]
    // console.log('goodsDetail.value: ', goodsDetail.value);
  } else {
    Toast.fail('请选择权益')
  }
}
const closeShow = () => {
  showReceive.value = false
}
</script>
<style scoped lang='less'>
.kjk {
  height: 100vh;
  position: relative;
  .header {
    text-align: center;
    margin: 0;
    padding: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    text-align: center;
    font-style: normal;
    height: 60px;
    .left-s-line {
      width: 20px;
      position: absolute;
      left: 16px;
      top: 16px;
    }
  }
  .qyl {
    width: 100%;
    height: calc(100vh - 128px);
    overflow-y: auto;
    .item-container {
      padding-top: 24px;
      .jx {
        width: 100%;
        height: 18px;
        background: #fcfaf4;
        margin-top: 24px;
      }
    }
    .clickableCell {
      position: relative;
      .van-radio {
        position: absolute;
        right: 20px;
        top: 0;
      }
    }
    .asd {
      background: rgba(215, 133, 94, 0.1);
      border-radius: 8px;
      padding: 5px 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 限制显示两行 */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis; /* 超出部分显示省略号 */
      .goodsDeibe {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #d7855e;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        margin-left: 10px;
      }
    }
  }

  :deep(.van-cell--clickable:active) {
    background-color: #fff !important;
  }
  :deep(.van-cell-group) {
    margin: 0;
  }
  :deep(.van-card) {
    padding: 0 !important;
    background-color: #fff !important;
    font-size: 16px !important;
    .van-card__desc {
      margin-top: 10px;
    }
    .van-card__content {
      min-height: 50px;
    }
    .van-card__footer {
      text-align: left;
      margin-top: 10px;
    }
  }
  .add {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 68px;
    background: #3c7058;
    color: #fff;
  }
}
.anbu {
  display: flex;
}

.popup {
  height: 30%;
  .w {
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    text-align: center;
  }
  .e {
    margin-bottom: 10px;
  }
}
.num {
  font-size: 20px;
  font-weight: bold;
  color: #ff6657;
}
.item {
  padding: 20px 10px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;

  .nickight {
    .tx {
      width: 40px;
      height: 40px;
    }
  }
}
.kdjs {
  padding: 10px;
  .shdz {
    display: flex;
    justify-content: space-between;
    .lc {
      display: flex;
    }
  }
}
.nicknameLabel {
  font-weight: 600;
}
</style>